﻿<template>
  <div class="container" style="width:99%;margin-top:-25px;">
    <!-- 查询条件 -->
    <div class="query-box">
      <el-form :model="queryBox" status-icon ref="queryBox">
        <el-row>
          <el-col :span="5">
            
            <div class="depart-box">
              <div class="slect-title">月份</div>
              <el-date-picker
              v-model="queryBox.monthYear"
              type="month"
              placeholder="选择月">
            </el-date-picker>
            </div>
          </el-col>
          <el-col :span="5">
            <el-form-item label prop="name">
              <el-input
                v-model="queryBox.title"
                placeholder="标题"
              >
                <template slot="prepend">标题</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="from-btns">
        <kt-button
          :label="$t('action.reset')"
          perms="true"
          type="primary"
          @click="reset('queryBox')"
        />
        <kt-button
          :label="$t('action.search')"
          perms="true"
          type="primary"
          @click="search"
        />
      </div>
    </div>
    <div class="add-btns fl">
      <kt-button
        :label="$t('新增营销日历')"
        type="primary"
        perms="MarketingManage:MarketingCalendar:newAdd"
        @click="handleNewADD"
      ></kt-button>
    </div>
    <!--表格内容栏-->
    <div class="btns">
      <Crm-table
        class="table-width"
        MarketingCalendar
        width="400"
        permsSee="MarketingManage:MarketingCalendar:see"
        permsEdit="MarketingManage:MarketingCalendar:edit"
        permsDelete="MarketingManage:MarketingCalendar:delet"
        permsToSee="MarketingManage:MarketingCalendar:toSee"
        :data="pageResult"
        :columns="columns"
        :loading="loading"
        @findPage="findPage"
        @handleToSee="handleToSee"
        @handleSee="handleSee"
        @handleEdit="handleEdit"
        @handleDeleteDic="handleDeleteDic"
        @handleUpData="handleUpData"
        :showBatchDelete="false"
      ></Crm-table>
    </div>
    <!--新增界面-->
    <el-dialog
      :title="titles?'新增月度营销日历':'编辑'"
      class="query-box calendarPop"
      width="30%"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
    >
      <el-form :model="addBox" ref="addBox">
        <el-row>
          <div class="depart-box">
            <div class="slect-title">月份</div>
              <el-date-picker
                v-model="addBox.monthYear"
                type="month"
                value-format="yyyy-MM"
                format="yyyy-MM"
                :picker-options="pickerOptions"
                placeholder="选择月"
                :disabled="!titles">
              </el-date-picker>
            </div>
        </el-row>
        <el-row style="margin-top:22px;">
            <div class="depart-box">
              <div class="slect-title">标题</div>
              <el-input
                v-model="title1"
                placeholder="请输入内容"
              ></el-input>
            </div>
        </el-row>
        <el-row style="margin-top:22px;">
            <div class="depart-box">
              <div class="slect-title">副标题</div>
              <el-input
                v-model="subtitle1"
                placeholder="请输入内容"
              ></el-input>
            </div>
        </el-row>
      </el-form>
      <div slot="footer" style="text-align:center" class="dialog-footer">
        <el-button
          :size="size"
          @click.native="dialogVisible = false"
          >{{ $t("action.cancel") }}</el-button
        >
        <el-button
          :size="size"
          type="primary"
          @click.native="submitAdd"
          :loading="editLoading"
          >{{ $t("action.submit") }}</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import KtButton from "@/views/Core/KtButton";
import CrmTable from "@/views/Core/CrmTable";

import { CodeToText } from "element-china-area-data";
import { baseUrl } from "@/utils/global";
import axios from "axios";
import Cookies from "js-cookie";
export default {
  name: "MarketingCalendar",
  components: {
    CrmTable,
    KtButton
  },
  data() {
    return {
      value2:'',
      size: "mini",
      editLoading: false,
      queryBox: {
        pageSize:"",
        pageNum:""
      },
      addBox: {
        monthYear:'',
        subtitle:'',
        title:'',
        title1:''
      },
      title1:"",
      subtitle1:"",
      assignDate:'',
      mytime: "",
      dialogVisible: false, // 新增界面是否显示
      titles: true, // 新增界面是否显示
      width: 200,
      columns: [
        { type: "index", label: "序号", minWidth: 50 },
        { prop: "monthYear", label: "月份", minWidth: 120 },
        { prop: "title", label: "标题", minWidth: 100 },
        { prop: "subtitle", label: "副标题", minWidth: 190 },
      ],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {
        content: []
      },
      // 限制跟进时间
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7; //如果没有后面的-8.64e7就是不可以选择今天的
        }
      },
      loading: false, // 加载标识
      

    };
  },
  methods: {
    // 搜索
    search() {
      this.loading = true;
      console.log(this.queryBox.monthYear)
      if(this.queryBox.monthYear!=""){
        let changeTime=new Date(this.queryBox.monthYear)
        if(changeTime.getFullYear()>2000){
          if(changeTime.getMonth()<9){
            this.queryBox.monthYear=changeTime.getFullYear()+"-0"+(changeTime.getMonth()+1)
          }else {
            this.queryBox.monthYear=changeTime.getFullYear()+"-"+(changeTime.getMonth()+1)
          }
        }
      }
      

      this.findPage(this.queryBox);
    },
    handleChange(value) {
      console.log(value);
    },
    get_dataTime() {
      let dateTime = new Date();
      // this.saveData.contractDate = this.dateFormat(dateTime);
      let mytime = dateTime.toLocaleTimeString("chinese", { hour12: false }); //获取当前时间
      this.mytime = mytime;
    },
    // 获取分页数据
    findPage: function(data) {
      if (data !== null) {                                        
            this.loading = true;
        // this.pageRequest = data.pageRequest;
      }
      this.queryBox.pageSize = this.pageRequest.pageSize;
      this.queryBox.pageNum = this.pageRequest.pageNum;
      this.$api.agent
        .calendarConfigList(this.queryBox)
        .then(res => {
          if (res.result == 2) {
            this.$message({
              message: res.msg,
              type: "error"
            });
          } else {
            let content = {
              content: res.data,
              totalSize: res.total
            };
            this.pageResult = content;
            this.loading = false;
          }
        })
        .then(data != null ? data.callback : "");
    },
    DateMinus(date1, date2) {
      //date1:小日期   date2:大日期
      var sdate = new Date(date1);
      var now = new Date(date2);
      var days = now.getTime() - sdate.getTime();
      var day = parseInt(days / (1000 * 60 * 60 * 24));
      return day;
    },
    // 重置
    reset() {
      this.queryBox.monthYear = "";
      this.queryBox.title = "";
      this.queryBox.pageSize =10;
      this.queryBox.pageNum = 1;
      this.findPage(this.queryBox);
    },
    handleNewADD() {
      this.dialogVisible = true;
      this.titles=true
      this.title1=""
      this.subtitle1=""
      this.addBox={
        monthYear:'',
        subtitle:'',
        title:'',
        title1:''
      }
    },
    // 编辑
    handleUpData(params){
      this.dialogVisible = true;
      this.titles=false
      this.addBox=params.row
      this.title1=params.row.title
      this.subtitle1=params.row.subtitle

    },
    // 查看
    handleSee(params){
      this.$router.push({
        path: "/MarketingManage/MarketingCalendarFile",
        query: {
          calendarId: params.row.id,
          date:params.row.monthYear
        }
      }); 
    },
    // 删除
    handleDeleteDic(params){
      this.$confirm('确认删除吗？', '提示', {
          type: 'warning'
        }).then(() => {
        this.$api.agent.calendarDeleteInfo({id:params.row.id}).then(res=>{
          if(res.result==1){
            this.$message({ message: res.msg, type: "success" });
            this.findPage(null)
          }else{
            this.$message({ message: res.msg, type: "error" });
            this.findPage(null)
          }
        })
      })
    },
    // 预览
    handleToSee(params){
      this.$router.push({
        path: "/MarketingCalendar/MarketingCalendar",
        query: {
          monthYear:params.row.monthYear
          // calendarId: params.row.id,
          // date:params.row.monthYear
        }
      });
      console.log(params); 
    },
    // 配置
    handleEdit(params){
      this.$router.push({
        path: "/MarketingManage/MarketingCalendarConfig",
        query: {
          calendarId: params.row.id,
          date:params.row.monthYear
        }
      }); 
    },
    submitAdd() {
      this.editLoading = true;
      this.addBox.subtitle=this.subtitle1
      this.addBox.title=this.title1
      let params = Object.assign({}, this.addBox);
      this.$api.agent.calendarAddOrUpdateInfo(this.addBox).then(res => {
        this.editLoading = false;
        if (res.result ==1) {
          this.$message({ message: "操作成功", type: "success" });
          this.dialogVisible = false;
          this.$refs["addBox"].resetFields();
          this.addBox.monthYear=''
          this.addBox.subtitle=''
          this.addBox.title=''
        } else {
          this.$message({ message: "操作失败, " + res.msg, type: "error" });
        }
        this.findPage(null);
      });
    }
  },
  mounted() {
    this.get_dataTime();
  }
};
</script>
<style>
@import url("../../assets/queryBox.css");
</style>
<style lang="scss" scoped>
.checked-person {
  font-weight: 500;
  display: inline-block;
  text-align: center;
  margin: 3% 0 3% 0;
}
.batchdistribution-pop-tit {
  font-size: 20px;
  font-weight: bold;
  display: inline-block;
  color: #303133;
}
.el-dialog__wrapper .el-form-item__content {
  margin-left: 0;
}
.demo-form-inline {
  width: 90%;
  margin: 0 auto;
  .el-dialog__body .el-input {
    width: 93% !important;
  }
  .el-select {
    width: 100% !important;
  }
  .tit {
    display: inline-block;
    margin-top: 10%;
  }
}
.btn .el-button {
  padding: 9px 5px !important;
}
.calendarPop{
  .el-input, .el-select{
    width: 100%;
  }
}
</style>
<style>
.batchdistribution-pop .el-dialog__header {
  padding: 0 0 0 0 !important;
}
</style>
